// SPAM3-UK Ford汽车信息页面 - Trim配置功能脚本
// 修复Issue #013: 前端点击频率控制未生效问题

// Trim功能状态管理
const TrimState = {
    isModalOpen: false,
    currentModel: null,
    isScrapingInProgress: false,
    lastScrapeTime: 0,
    scrapeDebounceTime: 2000 // 2秒防抖
};

/**
 * 显示车型配置信息 - 修复Issue #013
 * @param {string} model 车型名称
 */
async function showTrims(model) {
    if (!model) {
        console.error('❌ 车型名称为空');
        return;
    }

    // 防止重复操作
    if (TrimState.isModalOpen && TrimState.currentModel === model) {
        console.log('⚠️ 模态框已打开，跳过重复请求');
        return;
    }

    try {
        // 设置状态
        TrimState.isModalOpen = true;
        TrimState.currentModel = model;

        // 打开模态框
        const modal = document.getElementById('trimModal');
        const title = document.getElementById('trimModalTitle');
        const content = document.getElementById('trimContent');

        if (!modal || !title || !content) {
            throw new Error('模态框元素未找到');
        }

        // 设置标题和显示模态框
        title.textContent = `${model} 车型配置信息`;
        content.innerHTML = '<div class="loading">正在加载配置信息...</div>';
        modal.style.display = 'block';

        // 加载trim数据
        await loadTrimsForModel(model);

    } catch (error) {
        console.error('❌ 显示trim配置失败:', error);
        showTrimError('加载配置信息失败: ' + error.message);
    }
}

/**
 * 抓取车型配置信息 - 修复Issue #013点击频率控制
 * @param {string} model 车型名称
 */
async function scrapeTrims(model) {
    if (!model) {
        console.error('❌ 车型名称为空');
        return;
    }

    // Issue #013修复: 强化防抖和状态控制
    const currentTime = Date.now();
    const timeSinceLastScrape = currentTime - TrimState.lastScrapeTime;

    // 检查是否正在抓取
    if (TrimState.isScrapingInProgress) {
        console.log('⚠️ 抓取正在进行中，请稍候...');
        showTrimError('抓取正在进行中，请稍候完成');
        return;
    }

    // 检查防抖时间
    if (timeSinceLastScrape < TrimState.scrapeDebounceTime) {
        const remainingTime = Math.ceil((TrimState.scrapeDebounceTime - timeSinceLastScrape) / 1000);
        console.log(`⚠️ 请等待 ${remainingTime} 秒后再试`);
        showTrimError(`请等待 ${remainingTime} 秒后再试`);
        return;
    }

    try {
        // 设置抓取状态
        TrimState.isScrapingInProgress = true;
        TrimState.lastScrapeTime = currentTime;
        AppState.isScraping = true;

        // 更新按钮状态
        updateScrapeButtonsState(true);

        console.log(`🚀 开始抓取 ${model} 的配置信息`);

        // 发送抓取请求
        const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.scrapeTrims}?model=${encodeURIComponent(model)}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const result = await response.json();

        if (result.error) {
            throw new Error(result.error);
        }

        // 抓取成功
        console.log(`✅ ${model} 配置信息抓取成功`);
        showSuccess(`${model} 配置信息抓取成功！`);

        // 如果模态框已打开且是同一车型，刷新数据
        if (TrimState.isModalOpen && TrimState.currentModel === model) {
            await loadTrimsForModel(model);
        }

    } catch (error) {
        console.error('❌ 抓取trim配置失败:', error);
        showTrimError('抓取失败: ' + error.message);
    } finally {
        // 重置状态
        TrimState.isScrapingInProgress = false;
        AppState.isScraping = false;
        updateScrapeButtonsState(false);
    }
}

/**
 * 加载指定车型的trim配置数据
 * @param {string} model 车型名称
 */
async function loadTrimsForModel(model) {
    try {
        const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.trims}?model=${encodeURIComponent(model)}`);

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();

        if (data.error) {
            throw new Error(data.error);
        }

        // 显示trim数据
        displayTrimsData(data);

    } catch (error) {
        console.error('❌ 加载trim数据失败:', error);
        showTrimError('加载配置数据失败: ' + error.message);
    }
}

/**
 * 显示trim配置数据
 * @param {Object} data trim数据
 */
function displayTrimsData(data) {
    const content = document.getElementById('trimContent');
    if (!content) return;

    if (!data.trims || data.trims.length === 0) {
        content.innerHTML = '<div class="text-center">该车型暂无配置信息</div>';
        return;
    }

    const trimsHtml = data.trims.map(trimData => {
        const trimInfo = trimData.trim_info || {};
        const specsData = trimInfo.specifications || trimData.specifications || {};
        
        console.log('🔧 trim数据:', trimData);
        console.log('🔧 trim规格数据:', specsData);
        
        return `
            <div class="trim-card">
                <div class="trim-title">
                    ${trimInfo.trim_name || 'Unknown Trim'}
                    ${getPageTypeIndicator(trimInfo.page_type)}
                </div>
                
                <div class="trim-price">
                    £${trimInfo.price_from ? parseFloat(trimInfo.price_from).toLocaleString() : 'N/A'}
                    ${trimInfo.see_full_specs_available ? '<span class="page-type-indicator page-type-modern">FULL SPECS</span>' : ''}
                </div>
                
                <div class="vehicle-info">
                    <strong>配置详情:</strong> ${trimInfo.configure_url ? '<a href="' + trimInfo.configure_url + '" target="_blank">查看配置</a>' : 'N/A'}
                </div>
                
                ${renderTrimSpecs(specsData, trimData.specs_count)}
            </div>
        `;
    }).join('');

    // 添加总结信息
    const summaryHtml = `
        <div class="trim-summary mb-20">
            <h3>配置总览</h3>
            <p><strong>找到配置数量:</strong> ${data.total_trims || data.trims.length}</p>
            <p><strong>数据更新时间:</strong> ${new Date().toLocaleString()}</p>
        </div>
    `;

    content.innerHTML = summaryHtml + trimsHtml;
}

/**
 * 获取页面类型指示器
 * @param {string} pageType 页面类型
 */
function getPageTypeIndicator(pageType) {
    if (!pageType) return '';
    
    const typeMap = {
        'modern': { class: 'page-type-modern', text: 'MODERN' },
        'classic': { class: 'page-type-classic', text: 'CLASSIC' },
        'performance': { class: 'page-type-performance', text: 'PERFORMANCE' }
    };
    
    const type = typeMap[pageType.toLowerCase()];
    if (!type) return '';
    
    return `<span class="page-type-indicator ${type.class}">${type.text}</span>`;
}

/**
 * 渲染trim规格信息
 * @param {Object} specsData 规格数据
 * @param {number} specsCount 规格数量
 */
function renderTrimSpecs(specsData, specsCount) {
    console.log('🔧 renderTrimSpecs被调用');
    console.log('🔧 原始规格数据:', specsData);
    console.log('🔧 规格数据类型:', typeof specsData);
    console.log('🔧 规格数量:', specsCount);
    
    if (!specsData || Object.keys(specsData).length === 0) {
        console.log('⚠️ 规格数据为空或无效');
        return `<div class="trim-specs"><em>暂无详细规格信息</em></div>`;
    }

    // 检查数据类型并处理字符串化的JSON
    let parsedSpecs = specsData;
    if (typeof specsData === 'string') {
        console.log('🔧 检测到字符串格式，尝试解析JSON');
        try {
            parsedSpecs = JSON.parse(specsData);
            console.log('✅ JSON解析成功:', parsedSpecs);
        } catch (e) {
            console.error('❌ 规格数据JSON解析失败:', e);
            return `<div class="trim-specs"><em>规格数据格式错误</em></div>`;
        }
    }

    console.log('🔧 解析后的规格数据:', parsedSpecs);
    console.log('🔧 解析后数据类型:', typeof parsedSpecs);

    // 处理新的嵌套categories结构 (trim_info.specifications.categories)
    if (parsedSpecs.categories) {
        console.log('🔧 检测到categories结构，使用renderJSONSpecs');
        return renderJSONSpecs(parsedSpecs.categories);
    }

    // 处理API返回的分类数组格式
    // 检查是否为对象且至少有一个属性值是数组
    if (parsedSpecs && typeof parsedSpecs === 'object' && !Array.isArray(parsedSpecs)) {
        const hasArrayValues = Object.values(parsedSpecs).some(value => Array.isArray(value));
        console.log('🔧 检查分类数组格式 - hasArrayValues:', hasArrayValues);
        if (hasArrayValues) {
            console.log('🔧 使用renderCategoryArraySpecs处理分类数组格式');
            const result = renderCategoryArraySpecs(parsedSpecs);
            console.log('🔧 renderCategoryArraySpecs返回结果:', result);
            return result;
        }
    }

    // 处理传统格式的规格数据
    console.log('🔧 使用renderTraditionalSpecs处理传统格式');
    return renderTraditionalSpecs(parsedSpecs, specsCount);
}

/**
 * 渲染分类数组格式的规格数据 (API返回格式)
 * @param {Object} categoryData 分类数据对象
 */
function renderCategoryArraySpecs(categoryData) {
    console.log('🔧 renderCategoryArraySpecs被调用');
    console.log('🔧 分类数据:', categoryData);
    
    const categoriesHtml = Object.entries(categoryData)
        .filter(([categoryName, items]) => {
            const isValid = Array.isArray(items) && items.length > 0;
            console.log(`🔧 分类 ${categoryName}: 是数组=${Array.isArray(items)}, 长度=${Array.isArray(items) ? items.length : 'N/A'}, 有效=${isValid}`);
            return isValid;
        })
        .sort((a, b) => a[0].localeCompare(b[0])) // 按分类名排序
        .map(([categoryName, items]) => {
            console.log(`🔧 处理分类 ${categoryName}, 项目:`, items);
            const itemsHtml = items
                .sort((a, b) => (a.display_order || 0) - (b.display_order || 0))
                .map(item => {
                    const specName = item.spec_name || item.name || 'Unknown';
                    const specValue = item.spec_value || item.value || 'N/A';
                    const specUnit = item.spec_unit || item.unit || '';
                    const fullValue = specValue + (specUnit ? ' ' + specUnit : '');
                    
                    console.log(`🔧 规格项: ${specName} = ${fullValue}`);
                    
                    return `
                    <div class="spec-item">
                        <span class="spec-name">${specName}</span>
                        <span class="spec-value">${fullValue}</span>
                    </div>
                `;
                }).join('');

            const categoryHtml = `
                <div class="spec-category">
                    <div class="category-title">${categoryName}</div>
                    ${itemsHtml}
                </div>
            `;
            
            console.log(`🔧 分类 ${categoryName} HTML:`, categoryHtml);
            return categoryHtml;
        }).join('');

    const finalHtml = `<div class="trim-specs">${categoriesHtml}</div>`;
    console.log('🔧 最终渲染HTML:', finalHtml);
    return finalHtml;
}

/**
 * 渲染JSON格式的规格数据
 * @param {Object} categories 分类数据
 */
function renderJSONSpecs(categories) {
    const categoriesHtml = Object.entries(categories)
        .sort((a, b) => (a[1].category_order || 0) - (b[1].category_order || 0))
        .map(([categoryName, categoryData]) => {
            if (!categoryData.items || categoryData.items.length === 0) return '';

            const itemsHtml = categoryData.items
                .sort((a, b) => (a.display_order || 0) - (b.display_order || 0))
                .map(item => `
                    <div class="spec-item">
                        <span class="spec-name">${item.name}</span>
                        <span class="spec-value">${item.value}${item.unit ? ' ' + item.unit : ''}</span>
                    </div>
                `).join('');

            return `
                <div class="spec-category">
                    <div class="category-title">${categoryName}</div>
                    ${itemsHtml}
                </div>
            `;
        }).join('');

    return `<div class="trim-specs">${categoriesHtml}</div>`;
}

/**
 * 渲染传统格式的规格数据
 * @param {Object} specsData 规格数据
 * @param {number} specsCount 规格数量
 */
function renderTraditionalSpecs(specsData, specsCount) {
    const specsHtml = Object.entries(specsData).map(([key, value]) => `
        <div class="spec-item">
            <span class="spec-name">${key}</span>
            <span class="spec-value">${value}</span>
        </div>
    `).join('');

    return `
        <div class="trim-specs">
            <div class="spec-category">
                <div class="category-title">基础规格 ${specsCount ? `(${specsCount}项)` : ''}</div>
                ${specsHtml}
            </div>
        </div>
    `;
}

/**
 * 关闭trim模态框
 */
function closeTrimModal() {
    const modal = document.getElementById('trimModal');
    if (modal) {
        modal.style.display = 'none';
    }
    
    TrimState.isModalOpen = false;
    TrimState.currentModel = null;
}

/**
 * 显示trim错误信息
 * @param {string} message 错误信息
 */
function showTrimError(message) {
    const content = document.getElementById('trimContent');
    if (content) {
        content.innerHTML = `<div class="error">${message}</div>`;
    } else {
        // 如果模态框未打开，使用全局错误显示
        showError(message);
    }
}

/**
 * 更新抓取按钮状态 - Issue #013修复
 * @param {boolean} isDisabled 是否禁用
 */
function updateScrapeButtonsState(isDisabled) {
    const scrapeButtons = document.querySelectorAll('.scrape-btn');
    scrapeButtons.forEach(button => {
        button.disabled = isDisabled;
        if (isDisabled) {
            button.textContent = '抓取中...';
            button.style.opacity = '0.6';
        } else {
            button.textContent = '📥 抓取配置';
            button.style.opacity = '1';
        }
    });
}

/**
 * 初始化trim功能
 */
function initializeTrimFeatures() {
    console.log('🔧 初始化Trim功能模块');
    
    // 重置状态
    TrimState.isScrapingInProgress = false;
    TrimState.lastScrapeTime = 0;
    
    // 如果页面已加载，立即更新按钮状态
    if (document.readyState === 'complete') {
        updateScrapeButtonsState(false);
    }
}

// 初始化
document.addEventListener('DOMContentLoaded', initializeTrimFeatures);

// 导出到全局作用域
window.showTrims = showTrims;
window.scrapeTrims = scrapeTrims;
window.closeTrimModal = closeTrimModal;
window.TrimState = TrimState;
